<template>
  <div>
    <div class="main">
      <div class="mv-tags">
        <div class="mv-tags-area">
          <h3>区域</h3>
          <a
            href="#"
            class="tag-item"
            :class="isSelected === index ? 'item-selected' : ''"
            v-for="(item, index) in area"
            key="index"
            @click="selectArea(index)"
            >{{ item.name }}</a
          >
        </div>
        <div href="#" class="mv-tags-version">
          <h3>版本</h3>
          <a
            href="#"
            class="tag-item"
            :class="isSelectedVersion === index ? 'item-selectedVersion' : ''"
            v-for="(item, index) in version"
            key="index"
            @click="selectVersion(index)"
            >{{ item.name }}
          </a>
        </div>
        <div class="part_detail__hd">
          <h2>
            <a class="part-tag">港台<i class="close-btn">x</i></a>
          </h2>
        </div>
      </div>
      <div>
        <ul class="mv-list-ul">
          <li class="mv-list-li">
            <a href="" class="mv-list-container">
              <img
                class="mv-list-img"
                src="https://y.qq.com/music/photo_new/T015R640x360M101004d2QBo1uY3vN.jpg?max_age=2592000"
                alt=""
              />
            </a>
            <a>Bulletproof Maybach (Official Music Video)</a>
            <a>DDG /Offset</a>
            <div>697 2022-10-18</div>
          </li>

          <li class="mv-list-li">
            <a href="" class="mv-list-container">
              <img
                class="mv-list-img"
                src="https://y.qq.com/music/photo_new/T015R640x360M101004d2QBo1uY3vN.jpg?max_age=2592000"
                alt=""
              />
            </a>
            <a>Bulletproof Maybach (Official Music Video)</a>
            <a>DDG /Offset</a>
            <div>697 2022-10-18</div>
          </li>

          <li class="mv-list-li">
            <a href="" class="mv-list-container">
              <img
                class="mv-list-img"
                src="https://y.qq.com/music/photo_new/T015R640x360M101004d2QBo1uY3vN.jpg?max_age=2592000"
                alt=""
              />
            </a>
            <a>Bulletproof Maybach (Official Music Video)</a>
            <a>DDG /Offset</a>
            <div>697 2022-10-18</div>
          </li>

          <li class="mv-list-li">
            <a href="" class="mv-list-container">
              <img
                class="mv-list-img"
                src="https://y.qq.com/music/photo_new/T015R640x360M101004d2QBo1uY3vN.jpg?max_age=2592000"
                alt=""
              />
            </a>
            <a>Bulletproof Maybach (Official Music Video)</a>
            <a>DDG /Offset</a>
            <div>697 2022-10-18</div>
          </li>
        </ul>

        <ul class="mv-list-ul">
          <li class="mv-list-li">
            <a href="" class="mv-list-container">
              <img
                class="mv-list-img"
                src="https://y.qq.com/music/photo_new/T015R640x360M101004d2QBo1uY3vN.jpg?max_age=2592000"
                alt=""
              />
            </a>
            <a>Bulletproof Maybach (Official Music Video)</a>
            <a>DDG /Offset</a>
            <div>697 2022-10-18</div>
          </li>

          <li class="mv-list-li">
            <a href="" class="mv-list-container">
              <img
                class="mv-list-img"
                src="https://y.qq.com/music/photo_new/T015R640x360M101004d2QBo1uY3vN.jpg?max_age=2592000"
                alt=""
              />
            </a>
            <a>Bulletproof Maybach (Official Music Video)</a>
            <a>DDG /Offset</a>
            <div>697 2022-10-18</div>
          </li>

          <li class="mv-list-li">
            <a href="" class="mv-list-container">
              <img
                class="mv-list-img"
                src="https://y.qq.com/music/photo_new/T015R640x360M101004d2QBo1uY3vN.jpg?max_age=2592000"
                alt=""
              />
            </a>
            <a>Bulletproof Maybach (Official Music Video)</a>
            <a>DDG /Offset</a>
            <div>697 2022-10-18</div>
          </li>

          <li class="mv-list-li">
            <a href="" class="mv-list-container">
              <img
                class="mv-list-img"
                src="https://y.qq.com/music/photo_new/T015R640x360M101004d2QBo1uY3vN.jpg?max_age=2592000"
                alt=""
              />
            </a>
            <a>Bulletproof Maybach (Official Music Video)</a>
            <a>DDG /Offset</a>
            <div>697 2022-10-18</div>
          </li>
        </ul>

        <ul class="mv-list-ul">
          <li class="mv-list-li">
            <a href="" class="mv-list-container">
              <img
                class="mv-list-img"
                src="https://y.qq.com/music/photo_new/T015R640x360M101004d2QBo1uY3vN.jpg?max_age=2592000"
                alt=""
              />
            </a>
            <a>Bulletproof Maybach (Official Music Video)</a>
            <a>DDG /Offset</a>
            <div>697 2022-10-18</div>
          </li>

          <li class="mv-list-li">
            <a href="" class="mv-list-container">
              <img
                class="mv-list-img"
                src="https://y.qq.com/music/photo_new/T015R640x360M101004d2QBo1uY3vN.jpg?max_age=2592000"
                alt=""
              />
            </a>
            <a>Bulletproof Maybach (Official Music Video)</a>
            <a>DDG /Offset</a>
            <div>697 2022-10-18</div>
          </li>

          <li class="mv-list-li">
            <a href="" class="mv-list-container">
              <img
                class="mv-list-img"
                src="https://y.qq.com/music/photo_new/T015R640x360M101004d2QBo1uY3vN.jpg?max_age=2592000"
                alt=""
              />
            </a>
            <a>Bulletproof Maybach (Official Music Video)</a>
            <a>DDG /Offset</a>
            <div>697 2022-10-18</div>
          </li>

          <li class="mv-list-li">
            <a href="" class="mv-list-container">
              <img
                class="mv-list-img"
                src="https://y.qq.com/music/photo_new/T015R640x360M101004d2QBo1uY3vN.jpg?max_age=2592000"
                alt=""
              />
            </a>
            <a>Bulletproof Maybach (Official Music Video)</a>
            <a>DDG /Offset</a>
            <div>697 2022-10-18</div>
          </li>
        </ul>

        <ul class="mv-list-ul">
          <li class="mv-list-li">
            <a href="" class="mv-list-container">
              <img
                class="mv-list-img"
                src="https://y.qq.com/music/photo_new/T015R640x360M101004d2QBo1uY3vN.jpg?max_age=2592000"
                alt=""
              />
            </a>
            <a>Bulletproof Maybach (Official Music Video)</a>
            <a>DDG /Offset</a>
            <div>697 2022-10-18</div>
          </li>

          <li class="mv-list-li">
            <a href="" class="mv-list-container">
              <img
                class="mv-list-img"
                src="https://y.qq.com/music/photo_new/T015R640x360M101004d2QBo1uY3vN.jpg?max_age=2592000"
                alt=""
              />
            </a>
            <a>Bulletproof Maybach (Official Music Video)</a>
            <a>DDG /Offset</a>
            <div>697 2022-10-18</div>
          </li>

          <li class="mv-list-li">
            <a href="" class="mv-list-container">
              <img
                class="mv-list-img"
                src="https://y.qq.com/music/photo_new/T015R640x360M101004d2QBo1uY3vN.jpg?max_age=2592000"
                alt=""
              />
            </a>
            <a>Bulletproof Maybach (Official Music Video)</a>
            <a>DDG /Offset</a>
            <div>697 2022-10-18</div>
          </li>

          <li class="mv-list-li">
            <a href="" class="mv-list-container">
              <img
                class="mv-list-img"
                src="https://y.qq.com/music/photo_new/T015R640x360M101004d2QBo1uY3vN.jpg?max_age=2592000"
                alt=""
              />
            </a>
            <a>Bulletproof Maybach (Official Music Video)</a>
            <a>DDG /Offset</a>
            <div>697 2022-10-18</div>
          </li>
        </ul>

        <ul class="mv-list-ul">
          <li class="mv-list-li">
            <a href="" class="mv-list-container">
              <img
                class="mv-list-img"
                src="https://y.qq.com/music/photo_new/T015R640x360M101004d2QBo1uY3vN.jpg?max_age=2592000"
                alt=""
              />
            </a>
            <a>Bulletproof Maybach (Official Music Video)</a>
            <a>DDG /Offset</a>
            <div>697 2022-10-18</div>
          </li>

          <li class="mv-list-li">
            <a href="" class="mv-list-container">
              <img
                class="mv-list-img"
                src="https://y.qq.com/music/photo_new/T015R640x360M101004d2QBo1uY3vN.jpg?max_age=2592000"
                alt=""
              />
            </a>
            <a>Bulletproof Maybach (Official Music Video)</a>
            <a>DDG /Offset</a>
            <div>697 2022-10-18</div>
          </li>

          <li class="mv-list-li">
            <a href="" class="mv-list-container">
              <img
                class="mv-list-img"
                src="https://y.qq.com/music/photo_new/T015R640x360M101004d2QBo1uY3vN.jpg?max_age=2592000"
                alt=""
              />
            </a>
            <a>Bulletproof Maybach (Official Music Video)</a>
            <a>DDG /Offset</a>
            <div>697 2022-10-18</div>
          </li>

          <li class="mv-list-li">
            <a href="" class="mv-list-container">
              <img
                class="mv-list-img"
                src="https://y.qq.com/music/photo_new/T015R640x360M101004d2QBo1uY3vN.jpg?max_age=2592000"
                alt=""
              />
            </a>
            <a>Bulletproof Maybach (Official Music Video)</a>
            <a>DDG /Offset</a>
            <div>697 2022-10-18</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { getMVApi } from "@/api/digitalAlbum/digitalAlbum";
import { onMounted } from "@vue/runtime-core";
import { ref } from "vue";
export default {
  name: "Singer",
};
</script>

<script lang="ts" setup>
const area = ref([]);
const version = ref([]);
const isSelected = ref(0);
const isSelectedVersion = ref(0);
const getMV = async () => {
  const res = await getMVApi();
  console.log(res.mv_tag.data.area);
  console.log(res.mv_tag.data.version);
  area.value = res.mv_tag.data.area;
  version.value = res.mv_tag.data.version;
};
onMounted(getMV);
const selectArea = (index: any) => {
  isSelected.value = index;
};
const selectVersion = (index: any) => {
  isSelectedVersion.value = index;
};
</script>

<style scoped>
.main {
  width: 1200px;
  margin: 50px auto 50px;
}

.mv-tags-area,
.mv-tags-version {
  position: relative;
  height: auto;
  zoom: 1;
  clear: both;
  overflow: hidden;
  line-height: 26px;
  padding-left: 65px;
  font-size: 14px;
  color: #333;
}
.tag-item {
  float: left;
  padding: 0 8px;
  margin: 0 24px 15px 0;
}
a {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
  color: rgba(38, 170, 31, 0.9);
}

.item-selected,
.item-selectedVersion,
.item-selected:hover,
.item-selectedVersion:hover {
  background-color: rgba(38, 170, 31, 0.9);
  color: aliceblue;
}
h3 {
  position: absolute;
  top: 0;
  left: 0;
  font-weight: 400;
  width: 65px;
}

.part__hd,
.part_detail__hd {
  overflow: hidden;
  height: 60px;
  /* background: yellow; */
}
.part-tag {
  position: relative;
  float: left;
  line-height: 38px;
  margin: 8px 6px 0 0;
  padding: 0 25px 0 10px;
  border: 1px solid #c9c9c9;
  border-radius: 2px;
  font-size: 14px;
}
.part-tag:hover {
  background-color: rgba(38, 170, 31, 0.9);
  color: aliceblue;
}
.close-btn {
  position: absolute;
  right: 4px;
  width: 16px;
  height: 16px;
  top: 0;
  font-weight: 300;
}
.mv-list-ul {
  width: 1200px;
  display: flex;
  justify-content: space-between;
  margin: 50px auto 50px;
}

.mv-list-img {
  display: block;
  height: 161px;
  width: 258px;
  transition: all 1s;
}
.mv-list-img:hover {
  transform: scale(1.1);
  transition: all 0.5s;
  cursor: pointer;
}
.mv-list-container {
  display: block;
  height: 161px;
  width: 258px;
  overflow: hidden;
}
</style>
